<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>门窗服务平台</title>
<!-- Tell the browser to be responsive to screen width -->

<script src="../miniUI/scripts/boot.js" type="text/javascript"></script>
<link href="../miniUI/res/third-party/scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="../miniUI/res/third-party/scrollbar/jquery.mCustomScrollbar.concat.min.js" type="text/javascript"></script>
<link href="../miniUI/frame/frame1/res/menu/menu.css" rel="stylesheet" type="text/css" />
<script src="../miniUI/frame/frame1/res/menu/menu.js" type="text/javascript"></script>
	<script src="../miniUI/frame/frame1/res/menu/z.js" type="text/javascript"></script>
<script src="../miniUI/frame/frame1/res/menutip.js" type="text/javascript"></script>
<link href="../miniUI/frame/frame1/res/css/tabs.css" rel="stylesheet" type="text/css" />
<link href="../miniUI/frame/frame1/res/css/frame.css" rel="stylesheet" type="text/css" />
<link href="../miniUI/frame/frame1/res/css/index.css" rel="stylesheet" type="text/css" />
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport"> 
<!-- Bootstrap 3.3.5 -->
<!-- Font Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
<!-- Morris chart -->
<link rel="stylesheet" href="plugins/morris/morris.css">
<!-- jvectormap -->
<link rel="stylesheet"
	href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet"
	href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel='stylesheet' href='miniUI/scripts/miniui/themes/default/miniui.css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"
	type="text/css" media="screen" />
<link rel="stylesheet" href="bootstrap/css/bootstrap-addtabs.css"
	type="text/css" media="screen" />
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-addtabs.js"></script>
<script src="js/page/index.js" type="text/javascript"></script>
<script type="text/javascript">
	 
	$(function() {
		//回调函数得到ajax的数据
		getUserInfo(function(data){
			console.log(data);
			var slideList = data.success.role.roleMaths;		//大列表
			for(var n = 0; n < slideList.length; n++){
				var detailList = slideList[n].modular.menus;		//大列表对应的小列表
				//事件代理
				$(document).on('click','.treeview-menu',function(){
					//得到当前被点击的index
					var dataIndex = $(this).children('li').attr('data-index');
					//改变url
					$('#chengeLeft').attr('src',detailList[dataIndex].menuUrl);
					
				})
			}
			
		});
		//点击缩小侧边栏
		$("#chengeLeftSize").on('click',function(){
			var leftDetails = $(".main").position().left;
			leftDetails = leftDetails == 225 ? 50 : 225;
			$(".main").css('left',leftDetails+'px');
			//main2
	    });
	});
</script>
<style type='text/css'>
	.newStyle{
		padding: 5px 5px 5px 15px;
    	display: block;
    	font-size: 14px;
    	background:#2c3b41;
	}
</style>
</head>
  <body class="hold-transition skin-red-light sidebar-mini" style="overflow-x: hidden;overflow-y: hidden;">

<div class="wrapper">
	<header class="main-header">
		<!-- Logo -->
		<a href="index.html" class="logo"> <!-- 菜单栏缩小后显示 --> <span
			class="logo-mini"><b>九</b>源</span> <!-- 菜单栏完整时显示 --> <span
			class="logo-lg"><b>德州</b>九源</span>
		</a>
		
		<!-- Header Navbar: style can be found in header.less -->
		<nav class="navbar navbar-static-top" role="navigation">
			<!-- 菜单栏缩放功能-->
			<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
				role="button" id="chengeLeftSize"> <span class="sr-only">切换导航</span>
			</a>
			<!-- 头部的功能栏-->
			<div class="navbar-custom-menu">
				<ul class="nav navbar-nav">
					<!-- Messages: style can be found in dropdown.less-->
					<li class="dropdown messages-menu"><a href="#"
						class="dropdown-toggle" data-toggle="dropdown"> <i
							class="fa fa-envelope-o"></i> <span class="label label-success">4</span>
					</a>
						<ul class="dropdown-menu">
							<li class="header">You have 4 messages</li>
							<li>
								<!-- inner menu: contains the actual data -->
								<ul class="menu">
									<li>
										<!-- start message --> <a href="#">
											<div class="pull-left">
												<img src="dist/img/user2-160x160.jpg" class="img-circle"
													alt="User Image">
											</div>
											<h4>
												Support Team <small><i class="fa fa-clock-o"></i> 5
													mins</small>
											</h4>
											<p>Why not buy a new awesome theme?</p>
									</a>
									</li>
									<!-- end message -->
									<li><a href="#">
											<div class="pull-left">
												<img src="dist/img/user3-128x128.jpg" class="img-circle"
													alt="User Image">
											</div>
											<h4>
												AdminLTE Design Team <small><i class="fa fa-clock-o"></i>
													2 hours</small>
											</h4>
											<p>Why not buy a new awesome theme?</p>
									</a></li>
									<li><a href="#">
											<div class="pull-left">
												<img src="dist/img/user4-128x128.jpg" class="img-circle"
													alt="User Image">
											</div>
											<h4>
												Developers <small><i class="fa fa-clock-o"></i>
													Today</small>
											</h4>
											<p>Why not buy a new awesome theme?</p>
									</a></li>
									<li><a href="#">
											<div class="pull-left">
												<img src="dist/img/user3-128x128.jpg" class="img-circle"
													alt="User Image">
											</div>
											<h4>
												Sales Department <small><i class="fa fa-clock-o"></i>
													Yesterday</small>
											</h4>
											<p>Why not buy a new awesome theme?</p>
									</a></li>
									<li><a href="#">
											<div class="pull-left">
												<img src="dist/img/user4-128x128.jpg" class="img-circle"
													alt="User Image">
											</div>
											<h4>
												Reviewers <small><i class="fa fa-clock-o"></i> 2
													days</small>
											</h4>
											<p>Why not buy a new awesome theme?</p>
									</a></li>
								</ul>
							</li>
							<li class="footer"><a href="#">See All Messages</a></li>
						</ul></li>
					<!-- Notifications: style can be found in dropdown.less -->
					<li class="dropdown notifications-menu"><a href="#"
						class="dropdown-toggle" data-toggle="dropdown"> <i
							class="fa fa-bell-o"></i> <span class="label label-warning">10</span>
					</a>
						<ul class="dropdown-menu">
							<li class="header">You have 10 notifications</li>
							<li>
								<!-- inner menu: contains the actual data -->
								<ul class="menu">
									<li><a href="#"> <i class="fa fa-users text-aqua"></i>
											5 new members joined today
									</a></li>
									<li><a href="#"> <i class="fa fa-warning text-yellow"></i>
											Very long description here that may not fit into the page and
											may cause design problems
									</a></li>
									<li><a href="#"> <i class="fa fa-users text-red"></i>
											5 new members joined
									</a></li>
									<li><a href="#"> <i
											class="fa fa-shopping-cart text-green"></i> 25 sales made
									</a></li>
									<li><a href="#"> <i class="fa fa-user text-red"></i>
											You changed your username
									</a></li>
								</ul>
							</li>
							<li class="footer"><a href="#">View all</a></li>
						</ul></li>
					<!-- Tasks: style can be found in dropdown.less -->
					<li class="dropdown tasks-menu"><a href="#"
						class="dropdown-toggle" data-toggle="dropdown"> <i
							class="fa fa-flag-o"></i> <span class="label label-danger">9</span>
					</a>
						<ul class="dropdown-menu">
							<li class="header">You have 9 tasks</li>
							<li>
								<!-- inner menu: contains the actual data -->
								<ul class="menu">
									<li>
										<!-- Task item --> <a href="#">
											<h3>
												Design some buttons <small class="pull-right">20%</small>
											</h3>
											<div class="progress xs">
												<div class="progress-bar progress-bar-aqua"
													style="width: 20%" role="progressbar" aria-valuenow="20"
													aria-valuemin="0" aria-valuemax="100">
													<span class="sr-only">20% Complete</span>
												</div>
											</div>
									</a>
									</li>
									<!-- end task item -->
									<li>
										<!-- Task item --> <a href="#">
											<h3>
												Create a nice theme <small class="pull-right">40%</small>
											</h3>
											<div class="progress xs">
												<div class="progress-bar progress-bar-green"
													style="width: 40%" role="progressbar" aria-valuenow="20"
													aria-valuemin="0" aria-valuemax="100">
													<span class="sr-only">40% Complete</span>
												</div>
											</div>
									</a>
									</li>
									<!-- end task item -->
									<li>
										<!-- Task item --> <a href="#">
											<h3>
												Some task I need to do <small class="pull-right">60%</small>
											</h3>
											<div class="progress xs">
												<div class="progress-bar progress-bar-red"
													style="width: 60%" role="progressbar" aria-valuenow="20"
													aria-valuemin="0" aria-valuemax="100">
													<span class="sr-only">60% Complete</span>
												</div>
											</div>
									</a>
									</li>
									<!-- end task item -->
									<li>
										<!-- Task item --> <a href="#">
											<h3>
												Make beautiful transitions <small class="pull-right">80%</small>
											</h3>
											<div class="progress xs">
												<div class="progress-bar progress-bar-yellow"
													style="width: 80%" role="progressbar" aria-valuenow="20"
													aria-valuemin="0" aria-valuemax="100">
													<span class="sr-only">80% Complete</span>
												</div>
											</div>
									</a>
									</li>
									<!-- end task item -->
								</ul>
							</li>
							<li class="footer"><a href="#">View all tasks</a></li>
						</ul></li>
					<!-- User Account: style can be found in dropdown.less -->
					<li class="dropdown user user-menu"><a href="#"
						class="dropdown-toggle" data-toggle="dropdown"> <img
							id="userhead_top" src="dist/img/user2-160x160.jpg"
							class="user-image" alt="User Image">
							<span id="username_top" class="hidden-xs" onclick="userLogout()"></span>
					</a>
						<ul class="dropdown-menu">
							<!-- User image -->
							<li class="user-header"><img
								src="dist/img/user2-160x160.jpg" class="img-circle"
								alt="User Image">
								<p>
									Alexander Pierce - Web Developer <small>Member since
										Nov. 2012</small>
								</p></li>
							<!-- Menu Body -->
							<li class="user-body">
								<div class="col-xs-4 text-center">
									<a href="#">Followers</a>
								</div>
								<div class="col-xs-4 text-center">
									<a href="#">Sales</a>
								</div>
								<div class="col-xs-4 text-center">
									<a href="#">Friends</a>
								</div>
							</li>
							<!-- Menu Footer-->
							<li class="user-footer">
								<div class="pull-left">
									<a href="#" class="btn btn-default btn-flat">Profile</a>
								</div>
								<div class="pull-right">
									<a href="#" class="btn btn-default btn-flat">Sign out</a>
								</div>
							</li>
						</ul></li>
					<!-- Control Sidebar Toggle Button -->
					<li><a href="#" data-toggle="control-sidebar"><i
							class="fa fa-gears"></i></a></li>

				</ul>
			</div>
		</nav>
	</header>

<!-- Left side column. contains the logo and sidebar -->
	<aside class="main-sidebar">
	<!-- sidebar: style can be found in sidebar.less -->
	<section class="sidebar">
		<!-- Sidebar user panel -->
		<div class="user-panel">
			<div class="pull-left image">
				<img id="userHead" src="dist/img/user2-160x160.jpg"
					class="img-circle" alt="User Image">
			</div>
			<div class="pull-left info">
				<p id="userName">Alexander Pierce</p>
				<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
			</div>
		</div>
		<!-- search form -->
		<form action="#" method="get" class="sidebar-form">
			<div class="input-group">
				<input type="text" name="q" class="form-control"
					placeholder="Search..."> <span class="input-group-btn">
					<button type="submit" name="search" id="search-btn"
						class="btn btn-flat">
						<i class="fa fa-search"></i>
					</button>
				</span>
			</div>
		</form>
		<!-- /.search form -->
		<!-- sidebar menu: : style can be found in sidebar.less -->
		<ul id="mymenu" class="sidebar-menu"></ul>
	</section>
	<!-- /.sidebar -->
</aside>
<!--内容-->
	<div class="main">
	   <iframe src=""  id="chengeLeft" style="width:100%;height:100%;"></iframe>
	</div>
</div>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
	<div class="col-md-12">
		<div id="tabs">
			<!-- Nav tabs -->
			<ul class="nav nav-tabs" role="tablist">

			</ul>
			<!-- Tab panes -->
			<div class="tab-content">
				<a href="#"></a>
			</div>

		</div>
	</div>
	<!-- /.content-wrapper -->


	<!-- Control Sidebar -->
	<aside class="control-sidebar control-sidebar-dark">
		<!-- Create the tabs -->
		<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
			<li><a href="#control-sidebar-home-tab" data-toggle="tab"><i
					class="fa fa-home"></i></a></li>
			<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i
					class="fa fa-gears"></i></a></li>
		</ul>
		<!-- Tab panes -->
		<div class="tab-content">
			<!-- Home tab content -->
			<div class="tab-pane" id="control-sidebar-home-tab">

				<!-- /.control-sidebar-menu -->

				<!-- /.control-sidebar-menu -->

			</div>
			<!-- /.tab-pane -->

			<!-- Settings tab content -->
			<div class="tab-pane" id="control-sidebar-settings-tab"></div>
			<!-- /.tab-pane -->
		</div>
	</aside>
	<!-- /.control-sidebar -->
	<!-- Add the sidebar's background. This div must be placed
           immediately after the control sidebar -->
	<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 2.1.4 -->

<!-- jQuery UI 1.11.4 -->
<script src="js/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
	$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.5 -->

<!-- Morris.js charts -->
<script src="js/raphael-min.js"></script>
<script src="plugins/morris/morris.min.js"></script>
<!-- Sparkline -->
<script src="plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="js/moment.min.js"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="js/demo.js"></script>
<script>
function doHTMLUrl(){
	var dataIndex = $(this).attr('data-index');
	console.log($(this))
	//1.获取当前点击内容属性值
	//http://localhost:8080/bpm/bpm/user.html#
	//http://localhost:8080/bpm/bpm/userAdd.html#
	$('#chengeLeft').attr('src','role.html')
	
	//2.获取当然属性值的ID字段
	
	//3.使用ajax进行后端请求查询对应属性字段
	
	
	//4.将获取的url填充值对应属性内。
}

</script>
</body>
</html>
